<template>
	<view class="containt">
		<!-- <image src="@/static/img/jdsbj.png" mode="aspectFit" class="imgbg"></image> -->
		<view class="flex flexYCenter search">
			<u-search :clearabled="true" shape="square" :show-action="false"></u-search>
			<image src="@/static/img/matrixPermutation.png" mode="aspectFit" class="menu" v-if="mode" @click="switchMode"></image>
			<image src="@/static/img/listpermutation.png" mode="aspectFit" class="menu" v-else @click="switchMode"></image>
		</view>
		
		<view class="listbox" v-if="!mode">
			<view class="displayFlex itembox" v-for="(item,index) in list">
				<image src="@/static/img/productImg.png" mode="aspectFit" class="headPhone"></image>
				<view class="rightbox">
					<view class="title">皮卡啾~~</view>
					<view class="flex">
						<view class="viewbox">2023款·古驰Marmont系列·拆封未使用·绿色V型天鹅绒·尺寸22*13*6·小巧双G铆钉·金色调配件</view>
					</view>
					<view class="flex info">
						<view class="viewbox">￥19800</view>
					</view>
					<view class="handlebtn">

						<view class="lockIdentify" v-if="item.isHidden" @click="handleIsLock(index)">
							<image src="@/static/img/lock.png" mode=""></image>
							已锁</view>
						<view class="Identify" v-else @click="handleIsLock(index)">
							<image src="@/static/img/openlock.png" mode=""></image>
							锁货</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="prodlistbox flex flexSpaceBetween">
			<view class="" style="margin-right: 6rpx;">
				<view class="itembox" v-for="(item,index) in list">
					<image src="@/static/img/productImg.png" mode="aspectFit" class="prodPhone"></image>
					<view class="bottombox">
						<view class="title">皮卡啾~~</view>
						<view class="flex">
							<view class="viewbox">2023款·古驰Marmont系列·拆封未使用·绿色V型天鹅绒·尺寸22*13*6·小巧双G铆钉·金色调配件</view>
						</view>
						<view class="flex info flexSpaceBetween">
							<view class="prodviewbox">￥19800</view>
							<view class="handlebtn">
								<view class="lockIdentify" v-if="item.isHidden" @click="handleIsLock(index)">
									<image src="@/static/img/lock.png" mode=""></image>
									已锁</view>
								<view class="Identify" v-else @click="handleIsLock(index)">
									<image src="@/static/img/openlock.png" mode=""></image>
									锁货</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="" style="margin-left: 6rpx;">
				<view class="itembox" v-for="(item,index) in list2">
					<image src="@/static/img/productImg.png" mode="aspectFit" class="prodPhone"></image>
					<view class="bottombox">
						<view class="title">皮卡啾~~</view>
						<view class="flex">
							<view class="viewbox">2023款·古驰Marmont系列·拆封未使用·绿色V型天鹅绒</view>
						</view>
						<view class="flex info flexSpaceBetween">
							<view class="prodviewbox">￥19800</view>
							<view class="handlebtn">
								<view class="lockIdentify" v-if="item.isHidden" @click="handleIsLock2(index)">
									<image src="@/static/img/lock.png" mode=""></image>
									已锁</view>
								<view class="Identify" v-else @click="handleIsLock2(index)">
									<image src="@/static/img/openlock.png" mode=""></image>
									锁货</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { onMounted, ref } from "vue";
	const list = ref([
		{isHidden:true},{isHidden:false},{isHidden:false},{isHidden:false}
	])
	const list2 = ref([
		{isHidden:true},{isHidden:false},{isHidden:false},{isHidden:false}
	])
	const mode = ref(true)
	const switchMode = () =>{
		mode.value = !mode.value
	}
	onMounted(()=>{
		console.log(guanimg3,'222')
		// imageArray[0]=guanimg3
		// imageArray[0]=guanimg3
		// imageArray[0]=guanimg3
	})
	const handleIsLock = (index) => {
	  console.log(1,index,list.value[index])
	  // list.value[index].isHidden = !list.value[index].isHidden
	  uni.showModal({
	  	title: '提示',
	  	content: list.value[index].isHidden?'你确定解锁吗？解锁会扣除100元保证金，并积累违约次数，一天内违约三次将被限制锁定商品功能':'每次只可锁定一件商品，30分钟后没有成交，会扣除100元保证金是否锁定商品？',
	  	success: function (res) {
	  		if (res.confirm) {
	  			list.value[index].isHidden = !list.value[index].isHidden
	  		} else if (res.cancel) {
	  			console.log('用户点击取消');
	  		}
	  	}
	  });
	};
	const handleIsLock2 = (index) => {
	  console.log(1,index,list2.value[index])
	  // list.value[index].isHidden = !list.value[index].isHidden
	  uni.showModal({
	  	title: '提示',
	  	content: list2.value[index].isHidden?'你确定解锁吗？解锁会扣除100元保证金，并积累违约次数，一天内违约三次将被限制锁定商品功能':'每次只可锁定一件商品，30分钟后没有成交，会扣除100元保证金是否锁定商品？',
	  	success: function (res) {
	  		if (res.confirm) {
	  			list2.value[index].isHidden = !list2.value[index].isHidden
	  		} else if (res.cancel) {
	  			console.log('用户点击取消');
	  		}
	  	}
	  });
	};
</script>

<style lang="scss" scoped>
	.search{
		background: #fff;
		padding: 20rpx 20rpx;
		position: fixed;
		width: 750rpx;
		box-sizing: border-box;
		top: 0;
	}
	.menu{
		width: 28rpx;
		height: 28rpx;
		margin-left: 38rpx;
	}
	.containt {
	  padding: 14rpx 0rpx;
	}
	.imgbg{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	.listbox{
		// margin-top: 228rpx;
		padding: 100rpx 20rpx 0rpx;
	}
	.prodlistbox{
		padding: 100rpx 20rpx 0rpx;
		
		.prodPhone{
			
		}
		.itembox{
			background: #FFFFFF;
			border-radius: 7rpx;
			margin-bottom: 15rpx;
			// width: 96%;
			width: 350rpx;
			box-sizing: border-box;
			.prodPhone{
				width: 100%;
				height: 348rpx;
				border-radius: 7rpx;
			}
			.bottombox{
				padding: 16rpx 14rpx;
				box-sizing: border-box;
				.prodtitle{
					font-size: 27rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 800;
					color: #333333;
					line-height: 38rpx;
					margin-bottom: 11rpx;
					margin-top: 27rpx;
				}
				.prodviewbox{
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 33rpx;
				}
				.viewbox{
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #8487A4;
					line-height: 31rpx;
				}
			}
		}
		
		
	}
	.itembox{
		background: #FFFFFF;
		border-radius: 15rpx;
		margin-bottom: 15rpx;
	}
	.headPhone{
		width: 127rpx;
		height: 127rpx;
		margin-top: 27rpx;
		margin-left: 22rpx;
	}
	.rightbox{
		margin-left: 27rpx;
		flex: 1;
		padding-right: 27rpx;
		.viewbox{
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			line-height: 31rpx;
			margin-right: 6rpx;
			.span{
				color: #E6542B;
			}
		}
	}
	.title{
		font-size: 27rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 38rpx;
		margin-bottom: 11rpx;
		margin-top: 27rpx;
	}
	.mode{
		height: 33rpx;
		background: #F4F7FB;
		border-radius: 4rpx;
		font-size: 18rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #5D7698;
		line-height: 33rpx;
		margin-right: 9rpx;
		padding: 3rpx 7rpx;
	}
	.info{
		color:#999999;
		margin-top: 16rpx;
		align-items: center;
		.viewbox{
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 33rpx;
			.span{
				color: #E6542B;
			}
		}
	}
	.handlebtn{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 18rpx;
	}
	.Identify{
		width: 130rpx;
		height: 51rpx;
		// background: #953B82;
		border-radius: 27rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #6950FB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22rpx;
		margin-top: 18rpx;
		border: 1px solid #6950FB;
		box-sizing: border-box;
		image{
			width: 26rpx;
			height: 32rpx;
		}
		
	}
	.lockIdentify{
		width: 130rpx;
		height: 51rpx;
		// background: #953B82;
		background: #FFBC3F;
		border-radius: 27rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22rpx;
		margin-top: 18rpx;
		box-sizing: border-box;
		image{
			width: 26rpx;
			height: 32rpx;
		}
	}
	.listbox2{
		
	}
</style>